<template>
  <div>
    <van-tabs v-model:active="active" color="orange" @change="dodo">
      <!-- 正在热映 -->
      <van-tab title="正在热映" name="a" to="/movie/movieLeft"></van-tab>
      <!-- 即将上映 -->
      <van-tab title="即将上映" name="b" to="/movie/movieRight"></van-tab>
    </van-tabs>
    <router-view></router-view>
  </div>
</template>

<script lang="ts">
import { ref, onMounted, onUnmounted } from "vue";

export default {
  setup() {
    // 状态保留
    // 点击标签，拿到name值，存入本地存储
    function dodo() {
      localStorage.setItem("activeTab", active.value);
    }

    // 从本地存储取name值，没有则默认值为a
    const active = ref(localStorage.getItem("activeTab") || "a");

    // 刷新页面取值，如果本地存储有，则把标签name设置到对应值，实现状态保留
    onMounted(() => {
      const storedActiveTab = localStorage.getItem("activeTab");
      if (storedActiveTab) {
        active.value = storedActiveTab;
      }
    });

    // 获取滚动条高度
    const scrollTop = ref(0);
    // 监听滚动事件，在滚动时更新scrollTop的值
    const handleScroll = () => {
      scrollTop.value = document.documentElement.scrollTop;
      // console.log(scrollTop.value);
    };

    // 当滚动高度大于300时，隐藏上栏
    if (scrollTop.value >= 300) {
      console.log("该隐藏了");
    }
    // 在组件挂载时添加滚动事件监听器
    onMounted(() => {
      window.addEventListener("scroll", handleScroll);
    });
    // 在组件卸载时移除滚动事件监听器，防止内存泄漏
    onUnmounted(() => {
      window.removeEventListener("scroll", handleScroll);
    });

    return {
      active,
      dodo,
      scrollTop,
      handleScroll,
    };
  },
};
</script>

<style scoped>
.van-tabs {
  position: fixed;
  top: 0;
  width: 100%;
}
</style>
